import { Graph } from "@antv/x6";
import { Stencil } from "@antv/x6-plugin-stencil";
import {createStartNode, getStartDropNode} from "./Nodes/FlowControls/StartNode";
import {createEndNode, getEndDropNode} from "./Nodes/FlowControls/EndNode";
import {createSwitchNode, getSwitchDropNode} from "./Nodes/FlowControls/SwitchNode";
import {createWaitNode, getWaitDropNode} from "./Nodes/FlowControls/WaitNode";
import {createNewTabNode, getNewTabDropNode} from "./Nodes/PageOperation/NewTab";
import {createCloseTabNode, getCloseTabDropNode} from "./Nodes/PageOperation/CloseTab";
import {createOpenUrlNode, getOpenUrlDropNode} from "./Nodes/PageOperation/OpenUrl";
import {createWaitElementNode, getWaitElementDropNode} from "./Nodes/FlowControls/WaitElement";
import {createClickNode, getClickDropNode} from "./Nodes/PageOperation/Click";
import {createInputNode, getInputDropNode} from "./Nodes/PageOperation/Input";

class X6Stencil {

    graph!: Graph;
    stencil!: Stencil;

    constructor(target:Graph){
        this.initStancil(target);
    }

    initStancil(target:Graph){
        this.graph = new Graph({
            container: document.getElementById("stancilContainer")!,
            background: {
                color: "#ffffff",
            },
            autoResize: true,
        });
        
        this.stencil = new Stencil({
            title: 'Nodes',
            target: target,
            stencilGraphWidth: 200,
            groups: [
                {
                    name: "flowCtrl",
                    title: '流程控制',
                    collapsable: false,
                    graphWidth: 200,
                    graphHeight: 150
                },{
                    name: "pageOperation",
                    title: '页面操作',
                    collapsable: false,
                    graphWidth: 300,
                    graphHeight: 200
                },
            ],
            layoutOptions: {
                columns: 2,
                columnWidth: 90,
                rowHeight: 40,
            },
            getDropNode: this.handleDropNode,
        });
        this.initDefaultNodes();
    }

    initDefaultNodes() {
        // ========== 流程控制 ==========
        const start = createStartNode(this.graph);
        const end = createEndNode(this.graph);
        const wait = createWaitNode(this.graph);
        const waitElement = createWaitElementNode(this.graph);
        // ========== 流程控制 ==========

        
        // ========== 页面操作 ==========
        const newtab = createNewTabNode(this.graph);
        const closeTab = createCloseTabNode(this.graph);
        const openUrl = createOpenUrlNode(this.graph);
        const click = createClickNode(this.graph);
        const input = createInputNode(this.graph);
        // ========== 页面操作 ==========

        // 需要一个容纳 stencil 的 Dom 容器 stencilContainer
        const stencilContainer = document.getElementById("stancilContainer")!;
        stencilContainer.appendChild(this.stencil.container);
        this.stencil.load([start, end, wait, waitElement], "flowCtrl");
        this.stencil.load([newtab, closeTab, openUrl, click, input], "pageOperation");
    }
    handleDropNode(sourceNode:any, options:any){
        // console.log('getDropNode', sourceNode, options);
        if(sourceNode.data && sourceNode.data.id){
            let newNode = sourceNode.clone({ keepId: true });
            switch (sourceNode.data.id) {
                case 'StartNode':
                    return getStartDropNode(newNode);
                    break;
                case 'EndNode':
                    return getEndDropNode(newNode);
                    break;
                case 'SwitchNode':
                    return getSwitchDropNode(newNode);
                    break;
                case 'WaitNode': 
                    return getWaitDropNode(newNode);
                    break;
                case 'WaitElementNode': 
                    return getWaitElementDropNode(newNode);
                    break;
                case 'NewTabNode': 
                    return getNewTabDropNode(newNode);
                    break;
                case 'CloseTabNode': 
                    return getCloseTabDropNode(newNode);
                    break;
                case 'OpenUrlNode': 
                    return getOpenUrlDropNode(newNode);
                    break;
                case 'ClickNode': 
                    return getClickDropNode(newNode);
                    break;
                case 'InputNode': 
                    return getInputDropNode(newNode);
                    break;
                default:
                    let err = new Error('未找到节点');
                    console.error(err.message);
                    alert(err.message);
            }
              
        }else{
            let err = new Error('未找到节点Id');
            console.error(err.message);
            alert(err.message);
        }
        return sourceNode;
    }
}

export default X6Stencil;